<template>
  <div>
      <el-row class="layout">
          <el-card class="header">
              <span>我的订单</span>
          </el-card> 
          <el-card class="main">
              <el-card style="height:40px">
                  <!-- 订单详情 -->
                  <div style="font-size:10px;line-height:2px;margin-left:25%;float:left">
                      订单详情
                  </div>
                  <!-- 收货人 -->
                  <div style="font-size:10px;line-height:2px;margin-left:28%;float:left">
                      收货人
                  </div>
                    <!-- 金额 -->
                  <div style="font-size:10px;line-height:2px;margin-left:8%;float:left">
                      金额
                  </div>
                  <!-- 状态 -->
                  <div style="font-size:10px;line-height:2px;margin-left:8%;float:left">
                    状态
                  </div>
          </el-card>
          <div>
              <el-card class="order-time">
                  <!-- 交易时间 -->
                  <div style="font-size:10px;line-height:2px;float:left">
                      2019-09-27 16:59:08
                  </div>
                  <!-- 订单号 -->
                 <div style="font-size:10px;line-height:3px;float:left;margin-left:10%">
                     订单号：103852280367
                 </div>
              </el-card>
              <el-card style="height:130px">
                  <!-- 商品图片 -->
                  <div style="float:left;width:10%">
                      <el-link href="/details" target="_blank" :underline="false">
                      <img src="../assets/9.jpg" width="70" height="70" alt="">
                      </el-link>
                  </div>
                  <!-- 商品名称 -->
                  <div style="width:15%;font-size:12px;float:left;margin-top:10px">
                   <el-link style="font-size:12px" href="/details" target="_blank" :underline="false">
                   Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机</el-link>
                  </div>
                  <!-- 商品数量 -->
                  <div style="width:10%;float:left;margin-left:10%;margin-top:30px;font-size:12px">
                      x1
                  </div>
                  <!-- 申请售后 -->
                  <div style="width:10%;float:left;margin-top:30px;font-size:12px">
                      申请售后
                  </div>
                  <!-- 收货人 -->
                  <div style="width:10%;margin-left:1%;float:left;margin-top:30px;font-size:12px;">
                      螺旋的科沦
                  </div>
                  <!-- 金额 -->
                  <div style="width:6%;margin-left:1%;float:left;margin-top:24px;font-size:12px">
                      ￥5899
                      <hr>
                     在线支付
                  </div>
                  <!-- 状态 -->
                  <div style="width:6%;margin-left:5%;float:left;margin-top:24px;font-size:12px">
                      已支付
                      <hr>
                      <el-link href="/Orderdetails" target="_blank" :underline="false" style="font-size:12px">订单详情</el-link>
                  </div>
              </el-card>
          </div>
         
              
          </el-card>
      </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.layout{
    width:70%;
    margin: auto;
   
    margin-top: 5px;
}
.header{
    width: 100%;
    height: 60px;
}
.main{
     min-height: calc(100vh - 120px);
     margin-top:10px;
}
.order-time{
    height: 40px;
    margin-top: 10px;
}
</style>